<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title><fmt:message key="login.title"/></title>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <link rel="stylesheet" type="text/css" href="/extjs/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="/css/main.css" />
    <script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/extjs/ext-all.js"></script>
    <script type="text/javascript" src="/extjs/locale/ext-lang-<c:out value="${pageContext.request.locale.language}" />.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){
        Ext.QuickTips.init();
        var simple = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            url:'/auth.page',
            method: 'POST',
            standardSubmit: true,
            frame:true,
            title: '<fmt:message key="login.enter.text"/>',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',
            items: [{
                    fieldLabel: '<fmt:message key="login.username.label"/>',
                    name: 'login',
                    allowBlank:false
                },{
                    fieldLabel: '<fmt:message key="login.password.label"/>',
                    name: 'password',
                    inputType:'password'
                }
            ],
            buttons: [{
                text: '<fmt:message key="login.submit.text"/>',
                handler: function() {
                    simple.getForm().getEl().dom.action = '/auth.page';
                    simple.getForm().submit();
                }
            }]
        });

        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            // create instance immediately
            new Ext.BoxComponent({
                region: 'center',
                contentEl: 'main'
            }), {
                // lazily created panel (xtype:'panel' is default)
                region: 'south',
                contentEl: 'footer',
                split: true,
                height: 50,
                minSize: 100,
                maxSize: 200,
                collapsible: true,
                title: '',
                margins: '0 0 0 0'
            },
            ]
        });

        simple.render(document.getElementById("main"));
    });
    </script>
</head>
<body>
    <div id="main" align="center" class="x-hide-display">
    </div>
    <div id="footer" class="x-hide-display">
         <p align="right">(c) 2011</p>
    </div>
    </body>
</html>
